<template>
  <canvas
    class="xue-video-canvas"
    ref="canvas"
  />
</template>

<script>
export default {
    props: ['fps', 'data', 'duration', 'width', 'height'],
    mounted() {
        this.context = this.$refs.canvas.getContext('2d');
        if (this.data.length > 0) {
            //this.context.putImageData(this.data[1], 0, 0);
            this.seek(100)
        }
    },
    methods: {
        play() {
            const interval = 1 / this.fps;
            const all = this.duration / interval;
            const f = (time) => {
                this.context.putImageData(this.data[time], 0, 0);
                if (time < all) {
                    setTimeout(() => {
                        f(time + 1);
                    }, interval);
                }
            }
            if (this.context) {
                f(0);
            }
        },
        seek(time) {
            const interval = 1000 / this.fps;
            const index = Math.floor(time / interval);
            if (index < this.data.length && this.context) {
                this.context.putImageData(this.data[index], 0, 0);
            }
        }
    }
}
</script>

<style lang="less" scoped>
.xue-video-canvas {
    width: 100%;
    height: 100%;
}
</style>